<template>
  <el-card>
    <el-table border :data="skuData" style="margin: 10px 0;">
      <el-table-column type="index" label="序号" width="80px" align="center">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" show-overflow-tooltip width="150px" align="center">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述" show-overflow-tooltip width="300px" align="center">
      </el-table-column>
      <el-table-column label="图片" width="200px" align="center">
        <template #="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100px; height: 100px">
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="150px" align="center">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="150px" align="center">
      </el-table-column>
      <el-table-column label="操作" width="250px" fixed="right" align="center">
        <template #="{ row }">
          <el-button :type="row.isSale ? 'success' : 'warning'" size="small" :icon="row.isSale ? 'Top' : 'Bottom'"
            @click="updateSale(row)"></el-button>
          <el-button type="primary" size="small" icon="Edit" @click="updateSku()"></el-button>
          <el-button type="info" size="small" icon="InfoFilled" @click="findSku(row)"></el-button>
          <el-button type="danger" size="small" icon="Delete" @click="removeSku(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="width: 100%" v-model:current-page="currentPage" v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]" :background="true" layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total" @current-change="getSKuList" @size-change="changeSizePage" />
  </el-card>

  <el-drawer v-model="drawer">
    <template #header>
      <h4>查看商品详情</h4>
    </template>
    <template #default>
      <el-row>
        <el-col :span="8">名称</el-col>
        <el-col :span="16">{{ SkuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">描述</el-col>
        <el-col :span="16">{{SkuInfo.skuDesc}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">价格</el-col>
        <el-col :span="16">{{SkuInfo.price}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">平台属性</el-col>
        <el-col :span="16">
          <el-tag style="margin: 5px;" v-for="item in SkuInfo.skuAttrValueList" :key="item.id">{{ item.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">销售属性</el-col>
        <el-col :span="16">
          <el-tag style="margin: 5px;" v-for="item in SkuInfo.skuSaleAttrValueList" :key="item.id">{{ item.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">商品图片</el-col>
        <el-col :span="16">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in SkuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { reqSkuList, reqCancelSale, reqSaleSku,reqSkuInfo, reqRemoveSku } from '@/api/product/sku'
import type { SkuResponseData, SkuData, SkuInfoData } from '@/api/product/sku/types'
import { ElMessage, ElMessageBox  } from 'element-plus'

let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let skuData = ref<SkuData[]>([])
let drawer = ref(false)
let SkuInfo = ref<SkuData>({})

onMounted(() => {
  getSKuList()
})

async function getSKuList(pager = 1) {
  currentPage.value = pager
  let res: SkuResponseData = await reqSkuList(currentPage.value, pageSize.value)

  if (res.code == 200) {
    skuData.value = res.data.records
    total.value = res.data.total
  }
}

function changeSizePage() {
  getSKuList()
}

async function updateSale(row: SkuData) {
  if (row.isSale) {
    await reqCancelSale(row.id as number)
    ElMessage.success('下架成功')
    getSKuList()
  } else {
    await reqSaleSku(row.id as number)
    ElMessage.success('上架成功')
    getSKuList()

  }
}

function updateSku() {
  ElMessage.success('程序员正在努力更新中...')
}

async function findSku(row: SkuData) {
  drawer.value = true
  let res: SkuInfoData = await reqSkuInfo((row.id) as number)
  SkuInfo.value = res.data
}

function removeSku(id: any) {
  ElMessageBox.confirm('确定删除该商品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    let res = await reqRemoveSku(id)
    if (res.code == 200) {
      ElMessage.success('删除成功')
      getSKuList()
    } else {
     ElMessage.error('删除失败')
    }
  })
}

</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}


.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
:deep(.el-carousel__indicators) {
  text-align: center;
}
</style>
